<template>
	<view :class="themeName">
		<!-- pages/user_sgin/user_sgin.wxml -->
		<view class="user-sgin">
			<view class="header">
				<view class="flex">
					<!-- 头像 -->
					<view class="flex m-l-40">
						<u-image class="avatar" width="110rpx" height="110rpx" shape="circle" :src="avatar" />
					</view>
					<!-- 积分和明细按钮 -->
					<view class="m-l-30 flex row-between" style="flex: 1">
						<!-- 积分 -->
						<view>
							<view class="white" style="font-size: 56rpx">{{userIntegral}}</view>
							<view class="flex">
								<view class="sm flex white" @click="toSignRule">
									我的积分
									<image src="../../static/images/jifen_icon_help.png" class="m-l-10"
										style="height: 30rpx; width: 30rpx;"></image>
								</view>
							</view>
						</view>
						<!-- 明细按钮 -->
						<view class="score-detail-entry flex" @click="toSignDetail">
							<image style="width: 26rpx;height: 26rpx;flex: none; margin-right: 7rpx"
								src="../../static/images/jifen_icon_data.png"></image>
							<text class="sm white">积分明细</text>
						</view>
					</view>

				</view>
			</view>
			<view class="main">
				<!-- 签到列表 -->
				<view class="contain bg-white" v-if="isOpen">
					<view class="title">已累积签到 {{continuousDays}}天</view>
					<view class="day-list flex flex-wrap">
						<view v-for="(item, index) in lists" :key="index" class="item flex-col row-center col-center">
							<view :class="'circle row-center ' + (item.is_sign ? 'active-circle' : '')">
								<view class="num xs lighter" v-if="!item.is_sign">+{{item.integral}}</view>
								<image class="num" src="../../static/images/jifen_icon_select.png" v-if="item.is_sign">
								</image>
							</view>
							<view class="day m-t-10 lighter sm">{{item.day}}</view>
						</view>
					</view>
					<view class="right-sgin">
						<button :class="'lighter br60 ' + (todaySign ? 'gray' : 'primary-button')" @tap="userSignFun"
							size="md">{{todaySign ? '已签到' : '立即签到' }}</button>
					</view>
				</view>
				<!-- 签到功能关闭 -->
				<view class="contain-no bg-white flex-col col-center row-center" v-if="!isOpen">
					<view class="">
						<u-image width="72rpx" height="72rpx" shape="circle" :src="require('@/bundle/static/images/user_sign_close.png')" />
					</view>
					<view class="m-t-35 sm lighter" >
						抱歉，该功能未开启
					</view>
				</view>
				<!-- 赚积分 -->
				<view class="contain bg-white m-t-20" v-if="earn.length > 0">
					<view class="title flex">
						<view class="line br60 m-r-20"></view>
						<view class="bold xl">赚积分</view>
					</view>
					<view class="task">
						<view v-for="(item, index) in earn" :key="index" class="item flex row">
							<image class="img m-r-20"
								:src="item.icon">
							</image>
							<view class="con">
								<view class="md">{{item.name}}</view>
								<view class="xs">
									<text class="num mb20">+{{item.integral}}</text>
									<text>积分</text>
								</view>
							</view>
							<button hover-class="none" :class="'btn br60 ' + (item.is_done ? 'muted' : 'primary' )"
								:style="'border-color: ' + (item.is_done ? '#BBBBBB' : '#FF2C3C') + ';'"
								size="xs">{{item.is_done ? '已完成' : '未完成'}}</button>
						</view>
					</view>
				</view>
			</view>
		</view>

		<u-popup v-model="showPop" mode="center">
			<view class="pop-container">
				<view class="header-score flex row-center">+{{totalIntegral}}</view>
				<view class="box column-center">
					<view class="desc m-t-20 sm flex row-center">
						<view class="">
							获得
						</view>
						<image style="width: 28rpx; height: 30rpx;margin-right: 8rpx; margin-left: 8rpx"
							src="../../static/images/icon_jifen.png"></image>
						<view class="">
							{{totalIntegral}}
						</view>
					</view>
					<view class="bottom-box">
						<view class="md" style="line-height: 36rpx">
							您已累积签到 <text style="font-size: 36rpx; color: #FF2C3C;">{{days}}</text>天
						</view>
					</view>
					<view class="white br60 primary-btn" style="margin-top: 26rpx" @tap="onClose">确定</view>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import {
		getSignList,
		userSign,
		getSignRule,
		apiSignLists,
		apiSign,
	} from "@/api/user";
	export default {
		data() {
			return {
				avatar: '', // 用户头像
				// nickname: '', // 用户昵称
				userIntegral: '', // 用户积分
				todaySign: '', // 用户今天是否已签到
				continuousDays: '', // 用户连续签到天数
				// 签到列表
				lists: [{
					day: '', // 天数
					integral: '', // 赠送积分数量
					is_sign: '', //	对应天数是否已签到	
				}],
				// 签到后返回数据
				totalIntegral: '', // 赠送积分数量
				days: '',// 连续签到次数
				
				earn: [] ,// 赚积分渠道
				
				showPop: false, // 签到弹窗
				
				isOpen: 0, // 是否开启签到功能 0-关闭 1-开启
			};
		},

		/**
		 * 生命周期函数--监听页面加载
		 */
		onLoad: function(options) {
			// this.userSignFun = trottle(this.userSignFun, 1000, this)
		},


		onShow: function() {
			this.getSignLists()
		},

		methods: {
			
			// 跳转到规则页面
			toSignRule() {
				uni.navigateTo({
					url: '/bundle/pages/sign_rule/sign_rule',
				})
			},
			
			// 跳转到积分明细页面
			toSignDetail() {
				uni.navigateTo({
					url: '/bundle/pages/sign_detail/sign_detail',
				})
			},
			
			onClose() {
				this.showPop = false
			},
			
			// 获取页面信息
			getSignLists() {
				apiSignLists()
					.then(res => {
						// console.log('hszzz', res)
						this.avatar = res.user.avatar
						this.continuousDays = res.user.continuous_days
						this.todaySign = res.user.today_sign
						this.userIntegral = res.user.user_integral

						this.lists = res.lists
						
						this.earn = res.earn
						
						this.isOpen = res.is_open
					})
			},
			
			// 点击签到
			userSignFun() {
				if (this.todaySign) {
					return;
				}

				apiSign()
				.then(res => {
					this.showPop = true;
					this.totalIntegral = res.total_integral
					this.days = res.days
									
					this.getSignLists()
				});
			}
		}
	}
</script>

<style lang="scss">
	.user-sgin {
		padding-bottom: 100rpx;
	}

	.user-sgin .header {
		background-image: url('');
		background-repeat: no-repeat;
		background-size: 100%;
		height: 400rpx;
		width: 750rpx;
		padding-top: 40rpx;
		box-sizing: border-box;
	}

	.user-sgin .header .avatar {
		border-radius: 50%;
		border: 4rpx solid #fff;
	}

	.user-sgin .main {
		z-index: 100;
		margin-top: -200rpx;
		width: 100%;
		top: 186rpx;
		padding: 0 20rpx;
		box-sizing: border-box;
	}

	.user-sgin .main .contain {
		border-radius: 10rpx;
	}
	
	.user-sgin .main .contain-no {
		height: 350rpx;
		border-radius: 10rpx;
		box-shadow: 0 5rpx 12rpx rgba(0, 0, 0, 0.05);
	}

	.user-sgin .main .contain .title {
		padding: 24rpx 30rpx;
	}

	.user-sgin .main .contain .title .line {
		width: 6rpx;
		height: 34rpx;
		background-color: #ff2c3c;
	}

	.user-sgin .main .day-list {
		width: 100%;
	}

	.user-sgin .main .day-list .item {
		width: 14.2%;
		margin-bottom: 10rpx;
	}

	.user-sgin .main .day-list .item .num {
		width: 68rpx;
		height: 68rpx;
		line-height: 58rpx;
		border-radius: 50%;
		display: flex;
		align-items: center;
		justify-content: center;
		background-color: #f2f2f2;
	}

	.user-sgin .main .day-list .item .circle {
		position: relative;
	}

	.user-sgin .main .day-list .item .circle::before {
		content: "";
		width: 34rpx;
		height: 6rpx;
		position: absolute;
		background-color: #f2f2f2;
		right: 68rpx;
		top: 34rpx;
	}

	.user-sgin .main .day-list .item:nth-of-type(7n+1) .circle::before {
		content: "";
		background-color: rgba(0, 0, 0, 0);
	}

	.user-sgin .main .day-list .item .active-circle::before {
		content: "";
		width: 34rpx;
		height: 4rpx;
		position: absolute;
		background-color: #FFBD40;
		right: 68rpx;
		top: 34rpx;
	}


	.user-sgin .main .right-sgin {
		padding: 35rpx 145rpx;
	}

	.user-sgin .main .right-sgin .primary-button {
		color: #fff;
		background: linear-gradient(270deg, rgba(249, 95, 47, 1) 0%, rgba(252, 67, 54, 1) 55%, rgba(255, 44, 60, 1) 100%);
	}

	.user-sgin .main .contain .task {
		border-top: 1px solid $-color-border;
	}

	.user-sgin .main .contain .task .item {
		padding: 23rpx 30rpx;
	}

	.user-sgin .main .contain .task .item .img {
		width: 74rpx;
		height: 74rpx;
		border-radius: 22rpx;
	}

	.user-sgin .main .contain .task .item .con {
		flex: 1;
	}

	.user-sgin .main .contain .task .item .btn {
		width: 154rpx;
		border: 1px solid #FF2C3C;
	}

	.user-sgin .main .contain .task .item .con .num {
		color: #FF2C3C;
	}
	.user-sgin .main .contain .task .item .primary {
		color: #FF2C3C;
	}
	.score-detail-entry {
		background-color: rgba(255, 255, 255, 0.3);
		border-radius: 100rpx 0rpx 0rpx 100rpx;
		padding: 12rpx 19rpx 12rpx 16rpx;
		align-self: flex-end;
	}

	.van-popup {
		background-color: rgba(0, 0, 0, 0) !important;
	}

	.pop-container {
		background-repeat: no-repeat;
		background-size: 100%;
		height: 626rpx;
		width: 560rpx;
		position: relative;
		background-image: url('../../static/images/jifen_popBg.png');
	}

	.u-mode-center-box {
		background-color: rgba(0, 0, 0, 0) !important;
	}

	.header-score {
		font-size: 46rpx;
		line-height: 36rpx;
		font-weight: bold;
		padding-top: 90rpx;
		padding-bottom: 150rpx;
		// color: #FF2C3C;
		color: #FF8412;
	}

	.desc {
		color: white;
		background: linear-gradient(82deg, rgba(250, 81, 50, 1) 0%, rgba(236, 60, 34, 1) 49%, rgba(250, 83, 50, 1) 100%);
		padding: 16rpx 22rpx 16rpx 42rpx;
		text-align: center;
	}

	.box {}

	.bottom-box {
		margin-top: 84rpx;
		text-align: center;
	}

	.primary-btn {
		margin: 0 60rpx;
		width: 440rpx;
		height: 74rpx;
		border-radius: 37rpx;
		padding: 16rpx 190rpx;
		// background: linear-gradient(#f95f2f 0%, #ff2c3c 100%);
		background: linear-gradient(#f95f2f 0%, #ff2c3c 100%);
	}

	.gray {
		background-color: #f2f2f2 !important;
	}
</style>
